iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 26
0
自我挑戰組

Javascript 犀牛本-濃縮再濃縮 提煉再提煉系列 第 26

Day 26: JavaScript操作媒體與圖形 (Part 2)

  • 分享至 

  • xImage
  •  

SVG

使用XML語法來描述圖形
SVG 定義了七種元素

  • 矩形 <rect>
  • 圓形 <circle>
  • 橢圓 <ellipse>
  • <line>
  • 聚合線 <polyline>
  • 多邊形 <polygon>
  • 路徑 <path>

Canvas

  • 優點
    • 繪圖效率高,適合遊戲
    • 可直接存.png or .jpg
  • 缺點
    • 無元素概念
    • 放大會失真
<canvas id='Canvas' width='300' height='300'></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); // 取得 Canvas 渲染環境
var W = canvas.width;
var H = canvas.Height;
   .....

上一篇
Day 25: JavaScript操作媒體與圖形 (Part 1)
下一篇
Day 27: HTML5 API (Part 1)
系列文
Javascript 犀牛本-濃縮再濃縮 提煉再提煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言